<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="复制 小米购物车（table）原方法.css" />
		<style type="text/css">
			* {
				/*border: 1px solid ;*/
				padding: 0;
				margin: 0;
			}
			
			a {
				text-decoration: none;
			}
			
			.main-head {
				position: relative;
				height: 100px;
				border-bottom: 2px solid #FF6700;
			}
			
			#main-body {
				/*height: 10000px;*/
				padding-top: 38px;
				position: relative;
				background-color: #F5F5F5;
			}
			
			.head {
				position: absolute;
				/*border: 1px solid;*/
				top: 50%;
				left: 50%;
				margin-left: -613px;
				margin-top: -24px;
				width: 1226px;
				height: 48px;
				/*background-image: url(mibuyimg/2017-08-01_190557.png);
				background-repeat: no-repeat;*/
			}
			/*.head:hover{
				background-image: url(mibuyimg/2017-08-01_220745.png);
			}*/
			
			.head-text1 {
				line-height: 48px;
				margin-left: 93px;
				font-size: 27px;
				font-family: "微软雅黑";
			}
			
			.head-text2 {
				font-size: 12px;
				color: #757575;
			}
			
			.head ul {
				/*border: 1px solid;*/
				list-style-type: none;
				float: right;
				margin-top: 10px;
				position: absolute;
				right: 0;
				top: 12px;
			}
			
			.head li {
				margin-left: 3px;
				float: left;
			}
			
			.head p {
				float: left;
				width: 1000px;
				/*border: 1px solid;*/
			}
			
			.head a {
				font-size: 12px;
				color: #757575;
				text-decoration: none;
			}
			
			.main-head-logo {
				width: 48px;
				height: 48px;
				position: absolute;
				background-image: url(mibuyimg/2017-08-01_190557.png);
			}
			
			.main-head-logo:hover {
				background-image: url(mibuyimg/2017-08-01_220745.png);
			}
			
			#tab1 {
				/*position: absolute;*/
				/*left: 50%;
				margin-left: -613px;*/
				/*float: left;*/
				margin-left: auto;
				margin-right: auto;
				width: 1226px;
				background-color: white;
			}
			
			#tab1 td {
				border: 0;
				border-bottom: 1px solid #F4F4F4;
			}
			
			#tab1 em {
				cursor: pointer;
				font-style: normal;
				display: inline-block;
				width: 18px;
				height: 18px;
				border: 1px solid #d0f0f0;
			}
			
			.hover {
				background: url(mibuyimg/select.hover.png);
			}
			
			.active {
				background: url(mibuyimg/select.active.png);
			}
			
			.hovermts {
				display: block;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<!--产品1模态框-->
			<div id="fj1mt">
				<span id="fj1mtclose" onclick="addfj1c()">
						X
					</span>
				<span id="fj1mtselect">
						选择产品
					</span>
				<div id="fj1mt1">
					<div class="fj1mt1s" id="fj1mt1s">
						<div class="fj1mt1ss" id="fj1mt1ss">

						</div>
					</div>
					<div style="text-align: center;">
						<img width="160" src="mibuyimg/mt1.jpg" />
						<p style="font-size: 14px;color: #424242;">小米活塞耳机 清新版 黑色</p>
						<p style="height: 14px;"></p>
						<p style="font-size: 14px;color: #FF6700;"><span>25</span>
							<font>元</font>
						</p>
					</div>
				</div>
				<div id="fj1mt2">
					<div class="fj1mt2s" id="fj1mt2s">
						<div class="fj1mt2ss" id="fj1mt2ss">

						</div>
					</div>
					<div style="text-align: center;">
						<img width="160" src="mibuyimg/mt2.jpg" />
						<p style="font-size: 14px;color: #424242;">小米活塞耳机 清新版 白色</p>
						<p style="height: 14px;"></p>
						<p style="font-size: 14px;color: #FF6700;"><span>25</span>
							<font>元</font>
						</p>
					</div>
				</div>
				<div id="fj1mt2add" onclick="fj1mt2add1()">
					加入购物车
				</div>
			</div>
			<div id="fj2mt">
				<span id="fj2mtclose" onclick="addfj2c()">
						X
					</span>
				<span id="fj2mtselect">
						选择产品
					</span>
				<div id="fj2mt1">
					<div class="fj2mt1s">
						<div class="fj2mt1ss">

						</div>
					</div>
					<div style="text-align: center;">
						<img width="160" src="mibuyimg/mt3.jpg" />
						<p style="font-size: 14px;color: #424242;">米家随身风扇 蓝色</p>
						<p style="height: 14px;"></p>
						<p style="font-size: 14px;color: #FF6700;"><span>14.9</span>
							<font>元</font>
						</p>
					</div>
				</div>
				<div id="fj2mt2">
					<div class="fj2mt1s">
						<div class="fj2mt1ss">

						</div>
					</div>
					<div style="text-align: center;">
						<img width="160" src="mibuyimg/mt4.jpg" />
						<p style="font-size: 14px;color: #424242;">米家随身风扇 白色</p>
						<p style="height: 14px;"></p>
						<p style="font-size: 14px;color: #FF6700;"><span>14.9</span>
							<font>元</font>
						</p>
					</div>
				</div>
			</div>
			<div class="main-head">
				<div class="head">
					<p>
						<div class="main-head-logo">
							<a style="width: 48px;height: 48px;display: block;" href="https://www.mi.com/index.html" target="_blank"></a>
						</div>
						<span class="head-text1">我的购物车</span>
						<span class="head-text2">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
					</p>

					<ul>
						<li>
							<a href="#">登录</a>
						</li>
						<li style="font-size: 14px;">|</li>
						<li>
							<a href="#">注册</a>
						</li>
					</ul>

				</div>
			</div>
			<div id="main-body">

				<table id="tab1" border="0" cellspacing="0" cellpadding="0">
					<thead>
						<tr height="70">
							<td align="right" width="50">
								<!--<input type="checkbox" id="quanxuan" class="qxhexia" value="" onclick="zj()" />-->
								<em id="quanxuan"></em>
							</td>
							<td width="40">全选</td>
							<td width="130"></td>
							<td width="400">商品名称</td>
							<td align="center" width="66">单价(元)</td>
							<td align="center" width="180">数量</td>
							<td align="center" width="180">小计(元)</td>
							<td align="center" width="180">操作
								<input class="tianjia" type="button" name="" id="addbt" value="添加" />
							</td>
						</tr>
					</thead>
					<tbody>
						<tr height="117">
							<td align="right" width="50">
								<!--<input type="checkbox" id="" class="qxhexia" value="" onclick="zj()" />-->
								<em></em>
							</td>
							<td width="40"></td>
							<td width="130"><img src="mibuyimg/buy1.jpg" /></td>
							<td width="400">小米笔记本贴纸 13.3英寸 梵高星空</td>
							<td align="center" width="66">64.5</td>
							<td align="center" width="180">
								<input type="button" id="" value="-" class="butjian" onclick="jian(this.parentNode.children[1])" />
								<input type="text" class="inputtext" id="" value="1" onblur="updataxj(this)" />
								<input type="button" id="" value="+" class="butjia" onclick="jia(this.parentNode.children[1])" />
							</td>
							<td align="center" width="180">64.5</td>
							<td align="center" width="180">
								<input type="button" id="" value="x" class="butsc" onclick="del(this.parentNode.parentNode)" />
							</td>
						</tr>
						<tr height="117">
							<td align="right" width="50">
								<!--<input type="checkbox" name="" id="" class="qxhexia" value="" onclick="zj()" />-->
								<em></em>
							</td>
							<td width="40"></td>
							<td width="130"><img src="mibuyimg/buy2.jpg" /></td>
							<td width="400">小米圈铁耳机 金色</td>
							<td align="center" width="66">89</td>
							<td align="center" width="180">
								<input type="button" id="" value="-" class="butjian" onclick="jian(this.parentNode.children[1])" />
								<input type="text" class="inputtext" id="" value="1" onblur="updataxj(this)" />
								<input type="button" id="" value="+" class="butjia" onclick="jia(this.parentNode.children[1])" />
							</td>
							<td align="center" width="180">89</td>
							<td align="center" width="180">
								<input type="button" id="" value="x" class="butsc" onclick="del(this.parentNode.parentNode)" />
							</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<td height="20" class="tfoot0"></td>
							<td class="tfoot0"></td>
							<td class="tfoot0"></td>
							<td class="tfoot0"></td>
							<td class="tfoot0"></td>
							<td class="tfoot0"></td>
							<td class="tfoot0"></td>
							<td class="tfoot0"></td>
						</tr>

					</tfoot>
				</table>
				<!--附加产品-->
				<div id="fujia">

					<div id="fj1" onclick="addfj1()">
						+25元得小米活塞耳机 清新版 25元

					</div>
					<div id="fj2" onclick="addfj2()">
						米家随身风扇 14.9元
					</div>
				</div>
				<!--总计-->
				<div id="zongjidiv">
					<table style="background-color:white;margin-top: 50px;" width="1226" border="0" cellspacing="0" cellpadding="0">
						<tbody>
							<tr>
								<td align="center" width="90" height="50" colspan="2" class="tfoot1">
									<a style="font-size: 14px;color: #757575;" href="">继续购物</a>
								</td>
								<td style="font-size: 14px;color: #757575;" width="530" height="50" colspan="2" class="tfoot1">
									| 共<b></b>件商品，以选择<b></b>件
								</td>
								<td style="font-size: 14px;color: #FF6700;" width="246" height="50" colspan="2" class="tfoot1">合计（不含运费）（元）：</td>
								<td style="font-size: 39px;color: #FF6700; font-weight: bold;" width="180" id="sum" height="50" class="tfoot1">0</td>
								<td bgcolor="#FF6700" width="180" height="50" class="tfoot1" style="text-align: center;">
									<a style="font-size: 20px;font-family: '黑体';color: white;" href="">去结算</a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<!--其他人-->
				<div id="qtr">
					<div class="qtr1"></div>
					<div class="qtr2">买购物车中商品的人还购买了</div>
					<div class="qtr3"></div>
				</div>
				<!--其他产品-->
				<div id="qtcp" style="margin-left: auto;margin-right: auto;">
					<div id="qtcp1">
						<p style="height: 30px;"></p>
						<img src="mibuyimg/qtcp1.jpg" />
						<p style="font-size: 14px;margin-top: 20px;">米兔百变贴纸</p>
						<p style="font-size: 14px;margin-top: 10px;color: #FF6700;"><span>19.9</span>元</p>
						<p style="font-size: 14px;margin-top: 10px;color: #757575;">1887人好评</p>
						<div class="qtjr1" onclick="addqtjr1()">加入购物车</div>
					</div>
					<div id="qtcp2">
						<p style="height: 30px;"></p>
						<img src="mibuyimg/qtcp2.jpg" />
						<p style="font-size: 14px;margin-top: 20px;">小米笔记本内胆包13.3英寸</p>
						<p style="font-size: 14px;margin-top: 10px;color: #FF6700;"><span>99</span>元</p>
						<p style="font-size: 14px;margin-top: 10px;color: #757575;">1887人好评</p>
						<div class="qtjr2" onclick="addqtjr2()">加入购物车</div>
					</div>
					<div id="qtcp3">
						<p style="height: 30px;"></p>
						<img src="mibuyimg/qtcp3.jpg" />
						<p style="font-size: 14px;margin-top: 20px;">小米便携鼠标</p>
						<p style="font-size: 14px;margin-top: 10px;color: #FF6700;"><span>99</span>元</p>
						<p style="font-size: 14px;margin-top: 10px;color: #757575;">1887人好评</p>
						<div class="qtjr3" onclick="addqtjr3()">加入购物车</div>
					</div>
					<div id="qtcp4">
						<p style="height: 30px;"></p>
						<img src="mibuyimg/qtcp4.jpg" />
						<p style="font-size: 14px;margin-top: 20px;">小米圈铁耳机Pro</p>
						<p style="font-size: 14px;margin-top: 10px;color: #FF6700;"><span>149</span>元</p>
						<p style="font-size: 14px;margin-top: 10px;color: #757575;">1887人好评</p>
						<div class="qtjr4" onclick="addqtjr4()">加入购物车</div>
					</div>
					<div id="qtcp5">
						<p style="height: 30px;"></p>
						<img src="mibuyimg/qtcp5.jpg" />
						<p style="font-size: 14px;margin-top: 20px;">小米胶囊耳机</p>
						<p style="font-size: 14px;margin-top: 10px;color: #FF6700;"><span>69</span>元</p>
						<p style="font-size: 14px;margin-top: 10px;color: #757575;">1887人好评</p>
						<div class="qtjr5" onclick="addqtjr5()">加入购物车</div>
					</div>
				</div>
				<div id="qtcphzw">

				</div>
			</div>
			<div id="main-foot1">
				<div class="foot1-body">
					<div class="foot1-body1">
						<ul>
							<li>
								<a href="#">预约维修服务</a>
							</li>
							<li>|</li>
							<li>
								<a href="#">预约维修服务</a>
							</li>
							<li>|</li>
							<li>
								<a href="#">预约维修服务</a>
							</li>
							<li>|</li>
							<li>
								<a href="#">预约维修服务</a>
							</li>
							<li>|</li>
							<li>
								<a href="#">预约维修服务</a>
							</li>
						</ul>
					</div>
					<div class="foot1-body2">
						<dl>
							<dt>帮助中心</dt>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd></dd>
						</dl>
						<dl>
							<dt>帮助中心</dt>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd></dd>
						</dl>
						<dl>
							<dt>帮助中心</dt>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd></dd>
						</dl>
						<dl>
							<dt>帮助中心</dt>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd></dd>
						</dl>
						<dl>
							<dt>帮助中心</dt>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd></dd>
						</dl>
						<dl>
							<dt>帮助中心</dt>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd>
								<a href="#">账户管理</a>
							</dd>
							<dd></dd>
						</dl>
						<div class="foot1-body3">
							<!--<p class="f1b3p1">400-100-5678</p>
							<p class="f1b3p2">周一至周日 8:00-18:00</p>
							<p class="f1b3p3">（仅收市话费）</p>
							<p class="f1b3p4">24小时在线客服</p>-->
						</div>
					</div>

				</div>
			</div>
			<div id="main-foot2">
				<div class="foot2-body">

				</div>
			</div>
		</div>
		<script type="text/javascript">
			var buy = document.getElementById("tab1");
			var inputs = buy.getElementsByTagName("input");
			var add = document.getElementById("addbt")
				//全选

			//			document.getElementById("quanxuan").onclick = function() {
			//					//				var tab = document.getElementsByClassName("main-body");
			//					for(var i = 2; i < inputs.length; i += 5) {
			//						inputs[i].checked = this.checked;
			//					}
			//					zj();
			//				}
			//删除产品
			function del(tr) {
				if(confirm("是否确认删除？")) {
					buy.children[1].removeChild(tr);
					zj();

				}
			}
			//添加产品
			add.onclick = function() {
				var tr0 = document.createElement("tr")
				tr0.setAttribute("height", "117")
				tr0.innerHTML = "<td align='right' width='50'><em></em></td>";
				tr0.innerHTML += "<td width='40'></td>";
				tr0.innerHTML += "<td width='130'><img src='mibuyimg/buy3.jpg '/></td>";
				tr0.innerHTML += "<td width='400'>小米蓝牙耳机青春版套装 黑色</td>";
				tr0.innerHTML += "<td width='66' align='center'>99</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='-' class='butjian' onclick='jian(this.parentNode.children[1])'/><input type='text' class='inputtext' id='' value='1' onblur='updataxj(this)'/><input type='button' id='' value='+' class='butjia' onclick='jia(this.parentNode.children[1])'/></td>";
				tr0.innerHTML += "<td width='180' align='center'>99</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='x' class='butsc'  onclick='del(this.parentNode.parentNode)' /></td>";
				buy.children[1].appendChild(tr0);
			}

			function addqtjr1() {
				var tr0 = document.createElement("tr")
				tr0.setAttribute("height", "117")
				tr0.innerHTML = "<td align='right' width='50'><em></em></td>";
				tr0.innerHTML += "<td width='40'></td>";
				tr0.innerHTML += "<td width='130'><img width='100' src='mibuyimg/qtcp1.jpg'/></td>";
				tr0.innerHTML += "<td width='400'>米兔百变贴纸</td>";
				tr0.innerHTML += "<td width='66' align='center'>19.5</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='-' class='butjian' onclick='jian(this.parentNode.children[1])'/><input type='text' class='inputtext' id='' value='1' onblur='updataxj(this)'/><input type='button' id='' value='+' class='butjia' onclick='jia(this.parentNode.children[1])'/></td>";
				tr0.innerHTML += "<td width='180' align='center'>19.5</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='x' class='butsc'  onclick='del(this.parentNode.parentNode)' /></td>";
				buy.children[1].appendChild(tr0);
			}

			function addqtjr2() {
				var tr0 = document.createElement("tr")
				tr0.setAttribute("height", "117")
				tr0.innerHTML = "<td align='right' width='50'><em></em></td>";
				tr0.innerHTML += "<td width='40'></td>";
				tr0.innerHTML += "<td width='130'><img width='100' src='mibuyimg/qtcp2.jpg'/></td>";
				tr0.innerHTML += "<td width='400'>小米笔记本内胆包13.3英寸</td>";
				tr0.innerHTML += "<td width='66' align='center'>99</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='-' class='butjian' onclick='jian(this.parentNode.children[1])'/><input type='text' class='inputtext' id='' value='1' onblur='updataxj(this)'/><input type='button' id='' value='+' class='butjia' onclick='jia(this.parentNode.children[1])'/></td>";
				tr0.innerHTML += "<td width='180' align='center'>99</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='x' class='butsc'  onclick='del(this.parentNode.parentNode)' /></td>";
				buy.children[1].appendChild(tr0);
			}

			function addqtjr3() {
				var tr0 = document.createElement("tr")
				tr0.setAttribute("height", "117")
				tr0.innerHTML = "<td align='right' width='50'><em></em></td>";
				tr0.innerHTML += "<td width='40'></td>";
				tr0.innerHTML += "<td width='130'><img width='100' src='mibuyimg/qtcp3.jpg'/></td>";
				tr0.innerHTML += "<td width='400'>小米便携鼠标</td>";
				tr0.innerHTML += "<td width='66' align='center'>99</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='-' class='butjian' onclick='jian(this.parentNode.children[1])'/><input type='text' class='inputtext' id='' value='1' onblur='updataxj(this)'/><input type='button' id='' value='+' class='butjia' onclick='jia(this.parentNode.children[1])'/></td>";
				tr0.innerHTML += "<td width='180' align='center'>99</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='x' class='butsc'  onclick='del(this.parentNode.parentNode)' /></td>";
				buy.children[1].appendChild(tr0);
			}

			function addqtjr4() {
				var tr0 = document.createElement("tr")
				tr0.setAttribute("height", "117")
				tr0.innerHTML = "<td align='right' width='50'><em></em></td>";
				tr0.innerHTML += "<td width='40'></td>";
				tr0.innerHTML += "<td width='130'><img width='100' src='mibuyimg/qtcp4.jpg'/></td>";
				tr0.innerHTML += "<td width='400'>小米圈铁耳机Pro</td>";
				tr0.innerHTML += "<td width='66' align='center'>149</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='-' class='butjian' onclick='jian(this.parentNode.children[1])'/><input type='text' class='inputtext' id='' value='1' onblur='updataxj(this)'/><input type='button' id='' value='+' class='butjia' onclick='jia(this.parentNode.children[1])'/></td>";
				tr0.innerHTML += "<td width='180' align='center'>149</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='x' class='butsc'  onclick='del(this.parentNode.parentNode)' /></td>";
				buy.children[1].appendChild(tr0);
			}

			function addqtjr5() {
				var tr0 = document.createElement("tr")
				tr0.setAttribute("height", "117")
				tr0.innerHTML = "<td align='right' width='50'><em></em></td>";
				tr0.innerHTML += "<td width='40'></td>";
				tr0.innerHTML += "<td width='130'><img width='100' src='mibuyimg/qtcp5.jpg'/></td>";
				tr0.innerHTML += "<td width='400'>小米胶囊耳机</td>";
				tr0.innerHTML += "<td width='66' align='center'>69</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='-' class='butjian' onclick='jian(this.parentNode.children[1])'/><input type='text' class='inputtext' id='' value='1' onblur='updataxj(this)'/><input type='button' id='' value='+' class='butjia' onclick='jia(this.parentNode.children[1])'/></td>";
				tr0.innerHTML += "<td width='180' align='center'>69</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='x' class='butsc'  onclick='del(this.parentNode.parentNode)' /></td>";
				buy.children[1].appendChild(tr0);
			}
			//计算小计
			function updataxj(t) {
				var tr = t.parentNode.parentNode;
				var dj = tr.children[4].innerHTML;
				var mun = t.value;
				var xj = dj * mun;
				tr.children[6].innerHTML = xj;
				zj();

				//				document.getElementById("sum").innerHTML = zj();
			}
			//计算总计
			function zj() {
				var sumxj = 0;
				var trs = buy.children[1].children;
				for(var i = 0; i < trs.length; i++) {
					if(trs[i].firstElementChild.firstElementChild.className == "active") {
						sumxj += parseFloat(trs[i].children[6].innerHTML);
					}

				}
				document.getElementById("sum").innerHTML = sumxj;
				//				return sumxj;

			}
			//+1
			function jia(f) {
				f.value = parseFloat(f.value) + 1;
				updataxj(f);
				zj();
			}
			//-1
			function jian(f) {
				if(f.value <= 1) {
					0;
				} else {
					f.value = parseFloat(f.value) - 1;
					updataxj(f);
					zj();
				}
			}

			function addfj1() {
				var div1 = document.getElementById("fj1mt");
				div1.style.display = "block";
			}

			function addfj1c() {
				var div1 = document.getElementById("fj1mt");
				var span1 = document.getElementById("fj1mtclose");
				div1.style.display = "none";
			}

			function addfj2() {
				var div1 = document.getElementById("fj2mt");
				div1.style.display = "block";
			}

			function addfj2c() {
				var div1 = document.getElementById("fj2mt");
				var span1 = document.getElementById("fj2mtclose");
				div1.style.display = "none";
			}

			var spans = document.getElementsByTagName("em");
			// 全选
			for(var i = 0; i < spans.length; i++) {
				spans[i].onmouseover = function() {
					if(this.className != "active") {
						this.className = "hover";

					}
				}
				spans[i].onmouseout = function() {
					if(this.className != "active") {
						this.className = "";
					}
				}
				spans[i].onclick = function() {
					this.className = this.className != "active" ? "active" : "";
					zj();
				}
			}
			document.getElementById("quanxuan").addEventListener("click", function() {
				for(var i = 1; i < spans.length; i++) {
					spans[i].className = spans[0].className;
				}
				zj();
			});

			//模态框1-1
			var mts1 = document.getElementById("fj1mt1");
			var nummt1 = 1;
			mts1.onmouseover = function() {
				var mtsn = document.getElementById("fj1mt1ss");
				//					console.log(mts)
				//					if(mts.className != "active") {
				mtsn.style.display = "block";

				//					}
			}
			mts1.onmouseout = function() {
				var mtsm = document.getElementById("fj1mt1s");
				var mtsn = document.getElementById("fj1mt1ss");
				if(nummt1 == 0) {

					mtsn.style.display = "block";

				} else {

					mtsn.style.display = "none";
				}

			}
			mts1.onclick = function() {
					var mtsm = document.getElementById("fj1mt1s");
					var mtsn = document.getElementById("fj1mt1ss");
					mtsm.style.border = "1px solid #FF6700";
					mtsn.style.backgroundColor = " #FF6700";
					nummt1 = 0;
					var mtsm2 = document.getElementById("fj1mt2s");
					var mtsn2 = document.getElementById("fj1mt2ss");
					mtsm2.style.border = "1px solid #666666";
					mtsn2.style.backgroundColor = "#666666";
					mtsn2.style.display = "none";
					nummt2=1;
				}
				//模态框1-1结束
				//模态框1-2
			var mts2 = document.getElementById("fj1mt2");
			var nummt2 = 1;
			mts2.onmouseover = function() {
				var mtsn = document.getElementById("fj1mt2ss");
				//					console.log(mts)
				//					if(mts.className != "active") {
				mtsn.style.display = "block";

				//					}
			}
			mts2.onmouseout = function() {
				var mtsm = document.getElementById("fj1mt2s");
				var mtsn = document.getElementById("fj1mt2ss");
				if(nummt2 == 0) {

					mtsn.style.display = "block";
				} else {

					mtsn.style.display = "none";
				}

			}
			mts2.onclick = function() {
					var mtsm = document.getElementById("fj1mt2s");
					var mtsn = document.getElementById("fj1mt2ss");
					mtsm.style.border = "1px solid #FF6700";
					mtsn.style.backgroundColor = " #FF6700";
					nummt2 = 0;
					var mtsm1 = document.getElementById("fj1mt1s");
					var mtsn1 = document.getElementById("fj1mt1ss");
					mtsm1.style.border = "1px solid #666666";
					mtsn1.style.backgroundColor = "#666666";
					mtsn1.style.display = "none";
					nummt1 =1;
				}
				//模态框1-2结束
				//				spans[i].onmouseover = function() {
				//					if(this.className != "active") {
				//						this.className = "hover";
				//
				//					}
				//				}
				//				spans[i].onmouseout = function() {
				//					if(this.className != "active") {
				//						this.className = "";
				//					}
				//				}
				//				spans[i].onclick = function() {
				//					this.className = this.className != "active" ? "active" : "";
				//					zj();
				//				}
				//模态框1-1加入
			function fj1mt2add1() {
				var mtsn1 = document.getElementById("fj1mt1ss");
				if(nummt1 == 0) {
					var tr0 = document.createElement("tr")
				tr0.setAttribute("height", "117")
				tr0.innerHTML = "<td align='right' width='50'><em></em></td>";
				tr0.innerHTML += "<td width='40'></td>";
				tr0.innerHTML += "<td width='130'><img width='100' src='mibuyimg/mt1.jpg'/></td>";
				tr0.innerHTML += "<td width='400'>小米活塞耳机 清新版 黑色</td>";
				tr0.innerHTML += "<td width='66' align='center'>25</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='-' class='butjian' onclick='jian(this.parentNode.children[1])'/><input type='text' class='inputtext' id='' value='1' onblur='updataxj(this)'/><input type='button' id='' value='+' class='butjia' onclick='jia(this.parentNode.children[1])'/></td>";
				tr0.innerHTML += "<td width='180' align='center'>25</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='x' class='butsc'  onclick='del(this.parentNode.parentNode)' /></td>";
				buy.children[1].appendChild(tr0);
				}
				if(nummt2 == 0) {
					var tr0 = document.createElement("tr")
				tr0.setAttribute("height", "117")
				tr0.innerHTML = "<td align='right' width='50'><em></em></td>";
				tr0.innerHTML += "<td width='40'></td>";
				tr0.innerHTML += "<td width='130'><img width='100' src='mibuyimg/mt2.jpg'/></td>";
				tr0.innerHTML += "<td width='400'>小米活塞耳机 清新版 白色</td>";
				tr0.innerHTML += "<td width='66' align='center'>25</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='-' class='butjian' onclick='jian(this.parentNode.children[1])'/><input type='text' class='inputtext' id='' value='1' onblur='updataxj(this)'/><input type='button' id='' value='+' class='butjia' onclick='jia(this.parentNode.children[1])'/></td>";
				tr0.innerHTML += "<td width='180' align='center'>25</td>";
				tr0.innerHTML += "<td width='180' align='center'><input type='button' id='' value='x' class='butsc'  onclick='del(this.parentNode.parentNode)' /></td>";
				buy.children[1].appendChild(tr0);
				}
				var div1 = document.getElementById("fj1mt");
				div1.style.display = "none";

			}
			//模态框1-1加入 结束
		</script>
	</body>

</html>